<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 这里是动态绑定父元素的值 -->
			<login :title='msg'></login>
			<!-- 这里是父组件写死的数据 -->
			<login title='我是父组件数据2'></login>
		</div>
		<script src="../vue.js"></script>
		<script type="text/javascript">
			var login = {
				data: function() {
					return {
						message: '我们是祖国的花朵'
					}
				},
				//书写方式一:注意如果是驼峰方式则使用小横线隔开
				// props: ['title'],
				
				//书写方式二
				// props: {
				// 	'title': String
				//  如果类型是多种：'title': [String, Number]
				// },
				
				//书写方式三
				props: {
					'title': {
						type: String,
						required: true,
						default: () => []			
					}
				},
				template: '<div><h1>{{title}}</h1></div>'
			}
			
			var vm = new Vue({
				el: "#app",
				data: {
					msg: "我是父组件数据1"
				},
				methods: {},
				components: {
					login
				}
			})
		</script>
	</body>
</html>

